import React, { FC } from "react";
import { ContextMenuTrigger } from "react-contextmenu";
import { Wallpaper } from "@interfaces";
import './index.scss';
import { camelCase } from "@helpers";

type CardProps = Wallpaper

const Card : FC<CardProps> = (props: CardProps) => {
  const { uri, name } = props;

  const dataSet = {}

  Object.entries(props).filter(([key, value]) => {
    if (['number', 'string', 'boolean'].includes(typeof value)) {
      Object.assign(dataSet, {
        [`data-${camelCase(key)}`]: value
      })
    }
  });

  return (
      <ContextMenuTrigger id="same_unique_identifier">
        <img
          className="img"
          data-testid="card-test__img"
          {...dataSet}
          src={uri}
          loading="lazy"
          alt="" />
        <span className="img_name">{name}</span>
      </ContextMenuTrigger>
  )
}

export default Card;
